<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于百度地图的历史轨迹</title>
    <style>
        body,
        html {
            padding: 0;
            margin: 0
        }

        #container {
            position: fixed;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            background: #444444;
        }

        .btn-grounp {
            position: fixed;
            right: 100px;
            top: 10px;
        }

        .btn-grounp>input[type="button"] {
            height: 25px;

            border-radius: 5px;
            color: #444444;
            background-color: #F8F8F8;
            border: 1px solid #BBBBBB;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=x1ySji2AxajkmThvd8weGwOQ"></script>
    <script type="text/javascript" src="Dls.js"></script>
    <script type="text/javascript" src="./js/jquery-1.8.1.min.js"></script>
    <script src="./js/vconsole.min.js"></script>
    <script type="text/javascript" src="./index.js"></script>
</head>

<body>
    <div id="container">
        <div id="map"></div>
        <div class="btn-grounp">
            <input id="play" type="button" value="播放" onclick="lu.play();" />
            <input id="pause" type="button" value="暂停" onclick="lu.pause();" />
            <input id="reset" type="button" value="重置" onclick="lu.reset()" />
            <input type="button" value="是否地图跟随" onclick="lu.isGensui = !lu.isGensui" />
            <input type="button" value="初始化路线" onclick="lu.show()">
        </div>

    </div>
    </div>
</body>
</html>